<template>
  <div class="">
    <a-card>
      <template #title>
        <a-checkbox
                v-model:checked="state.checkAll"
                :indeterminate="state.indeterminate"
                @change="onCheckAllChange"
        >
          {{ $t('header.All') }}
        </a-checkbox>
      </template>
      <div>
        <a-checkbox-group v-model:value="state.checkedList" style="width: 100%">
          <a-row>
            <a-col :span="8"  v-for="(item,index) in plainOptions" :key="index">
              <a-checkbox :value="item" :disabled="!(state.checkedList.length-1)&&(state.checkedList.indexOf(item)!=-1)">{{item}}</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </div>
    </a-card>
    <a-row>
      <a-col :span="24" style="text-align: right;margin-top: 20px;">
        <a-space :size="[20, 16]" wrap>
          <a-button :disabled="state.checkedList.length==0" type="primary" @click="save">{{ $t('header.Confirm') }}</a-button>
          <a-button @click="cancel">{{ $t('header.Close') }}</a-button>
        </a-space>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
    import { useStore } from "vuex";
import {
  Menu,
  Alert,
  Card,
  Form,
  Icon,
  Input,
  Button,
  Tooltip,
  Select,
  Col,
  Row,
  Space,
  Dropdown,
  Drawer,
  notification,
    message
} from "ant-design-vue";
import {
} from "@ant-design/icons-vue";
import * as http from "@/api/flow/index.js";
    import { columns } from './../tableMain/columns';
import { ref, reactive, h, onMounted, watch, computed ,defineEmits} from "vue";
    const emit = defineEmits(["update:openTableShow"]);
    var showC = []
    const plainOptions = columns.value.map(function(item) {
        if (!item.hide) {
            showC.push(item.name||item.title)
        }
        return item.name||item.title
    });
    const flowColShowList = sessionStorage.getItem('flowColShowList')
    console.log(flowColShowList,'[[]]0')
    if (flowColShowList){
        showC=JSON.parse(flowColShowList)
    }
//    const plainOptions = ['任务名称', '任务描述', '任务状态','源/目标类型','全量进度','源/目标数据源','任务延迟',
//        '今日增量操作统计','比对状态','任务校验','启用比对','参与人','组名称','创建时间','任务概览'];
    const state = reactive({
        indeterminate: true,
        checkAll: false,
        checkedList: showC
    });
    state.indeterminate = !!state.checkedList.length && state.checkedList.length < plainOptions.length;
    state.checkAll = state.checkedList.length === plainOptions.length;
    const onCheckAllChange = e => {
        Object.assign(state, {
            checkedList: e.target.checked ? plainOptions : [],
            indeterminate: false,
        });
    };
    watch(
        () => state.checkedList,
        val => {
            state.indeterminate = !!val.length && val.length < plainOptions.length;
            state.checkAll = val.length === plainOptions.length;
        },
    );
    const save = () => {
        if (state.checkedList.length==0){
            message.warning('最少选择一项');
            return
        }
        columns.value.map(function(item,index) {
            if (state.checkedList.indexOf(item.name||item.title)!=-1){
                columns.value[index].hide=false
            }else{
                columns.value[index].hide = true
            }
        });
        sessionStorage.setItem('flowColShowList',JSON.stringify(state.checkedList))
        emit("update:TableShowUP", state.checkedList);
    };
    const cancel = () => {
        emit("update:TableShowUP");
    };
</script>

<style scoped>
</style>
